import { FC, useState } from "react"
import { connect } from "react-redux"
import Header from '@/components/header'
import Footer from '@/components/footer'
import Banner from '@/components/banner'
import swap from '@/assets/images/swap/swap.png'
import { Input } from 'antd-mobile'
import { useTranslation } from 'react-i18next'
import sui from '@/assets/images/swap/sui.png'
import shui from '@/assets/images/swap/shui.png'
import toggle from '@/assets/images/swap/toggle.png'
import "./index.scss"

interface ISwap {}

const Swap: FC<ISwap> = () => {

	const { t } = useTranslation()
	const [ list ] = useState([
        {
            name: '0 SHUI',
            desc: 'top1'
        },
        {
            name: '0 SHUI',
            desc: 'top2'
        },
        {
            name: '0 SHUI',
            desc: 'top3'
        },
    ])

	const [ game ] = useState([
        {
            gameFi: 'white paper',
            proportion: '1 SUI = 200 SHUI',
            holder: '50,000 SHUI',
            distribution: '250 million'
        },
    ])

	const [ table, setTable ] = useState(0)

	return (
		<div id="swap-page">
			<div className='swap-container'>
				<Header />
				<Banner />
				<div className="swap-list">
					<div className="swap-num">
						<img src={swap} alt="" />
						<div className="num-top-box flex-between">
							{
								list.map((item, index) => (
									<div className="swap-num-item" key={index}>
										<p className="name">{item.name}</p>
										<p className="num">{t(`swap.${item.desc}`)}</p>
									</div>
								))
							}
						</div>
					</div>
					<div className="swap-content">
						<div className="swap-content-left">
							<p className="swap-content-title">{t('swap.white')}</p>
							<p className="title-desc">{t('swap.whiteP')}</p>
							<div className="swap-content-table table">
								<div className="row head line1">
									<div className="cell first">{t('swap.table1')}</div>
									<div className="cell">{t('swap.table2')}</div>
									<div className="cell">{t('swap.table3')}</div>
									<div className="cell">{t('swap.table4')}</div>
									<div className="cell">{t('swap.table5')}</div>
								</div>
								{
									game.map((item, index) => (
										<div className="row td-content line1" key={index}>
											<div className="cell first">{item.gameFi}</div>
											<div className="cell">{item.proportion}</div>
											<div className="cell">{item.holder}</div>
											<div className="cell">{item.distribution}</div>
											<div className="cell">{t('market.nft')}</div>
										</div>
									))
								}
							</div>
							<p className="swap-content-title">{t('swap.goldPlan')}</p>
							<p className="title-desc">{t('swap.goldP')}</p>
							<div className="swap-gold-reserve flex">
								<span>{t('swap.goldReserve')}</span>
								<span>1 SUI =1 SHUI</span>
								<span>100 million</span>
								<span>Not have</span>
							</div>
						</div>
						<div className="swap-content-right">
							<div className="right-tab">
								<div onClick={() => setTable(0)} className={table === 0 ? 'active flex-center' : 'flex-center'}>{t('swap.whitePaper')}</div>
								<div onClick={() => setTable(1)} className={table === 1 ? 'active flex-center' : 'flex-center'}>{t('swap.plan')}</div>
							</div>
							<div className="right-content flex">
								<div className="right-content-sui">
									<div className="img-box flex-center">
										<img src={sui} alt="" />
									</div>
									<div className="sui-input flex-center">
										<Input
											defaultValue={'9999'}
										/>
										<span>SUI</span>
									</div>
								</div>
								<div className="right-content-ratio">
									<img src={toggle} alt="" />
									<div className="ratio">Ratio</div>
									<p>1 : 1</p>
								</div>
								<div className="right-content-shui">
									<div className="img-box flex-center">
										<img src={shui} alt="" />
									</div>
									<div className="ratio-shui">
										<span>0</span>
										SHUI
									</div>
								</div>
							</div>
							<div className="ratio-desc">min 1 SUI | max 250 SUI</div>
							<div className="ratio-submit">
								<div className="btn">{t('swap.submit')}</div>
							</div>
						</div>
					</div>
				</div>
				{/* <Token />  */}
				<Footer />
			</div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(Swap)